<template>
  <el-select
    v-model="localValue"
    :placeholder="placeholder"
    :disabled="disabled"
    :clearable="clearable"
    @change="handleChange"
    style="width: 100%"
  >
    <el-option v-for="item in adminList" :key="item.id" :label="item.name" :value="item.id" />
  </el-select>
</template>

<script setup lang="ts">
  import { ref, onMounted, watch } from 'vue'
  import { ElMessage } from 'element-plus'
  import { customerApi } from '@/api/customer'

  interface AdminOption {
    id: string | number
    name: string
    [key: string]: any
  }

  interface Props {
    modelValue: string | number | null
    placeholder?: string
    disabled?: boolean
    clearable?: boolean
    options?: AdminOption[] // 支持外部传入选项
  }

  interface Emits {
    (e: 'update:modelValue', value: string | number | null): void
    (e: 'change', value: string | number | null): void
    (e: 'select', admin: AdminOption): void
  }

  const props = withDefaults(defineProps<Props>(), {
    placeholder: '请选择管家',
    disabled: false,
    clearable: true,
    options: () => [],
  })

  const emit = defineEmits<Emits>()

  const adminList = ref<AdminOption[]>([])

  // 创建本地响应式变量存储选中的值
  const localValue = ref(props.modelValue)

  // 监听外部modelValue变化，更新本地值
  watch(
    () => props.modelValue,
    newValue => {
      localValue.value = newValue
    }
  )

  // 监听外部传入的options变化
  watch(
    () => props.options,
    newOptions => {
      if (newOptions && newOptions.length > 0) {
        console.log('从父组件接收管理员选项数据:', newOptions)
        adminList.value = newOptions
      }
    },
    { immediate: true }
  )

  // 处理值变化
  const handleChange = (value: string | number | null) => {
    emit('update:modelValue', value)

    // 找到选中的管理员，并将其完整信息通过select事件发送出去
    if (value) {
      const selectedAdmin = adminList.value.find(admin => admin.id === value)
      if (selectedAdmin) {
        emit('select', selectedAdmin)
      }
    }

    emit('change', value)
  }

  // 获取管理员列表
  const getAdminList = async () => {
    // 如果已经有从父组件传入的选项数据，则不再调用API
    if (props.options && props.options.length > 0) {
      console.log('已有从父组件传入的管理员数据，跳过API调用')
      return
    }

    try {
      console.log('开始请求管理员数据...')
      const response = await customerApi.getAdminList()
      console.log('管理员数据响应:', response)

      // 检查响应状态
      if (response && response.code === 0) {
        if (Array.isArray(response.data)) {
          adminList.value = response.data
          console.log('管理员数据设置成功:', adminList.value)
        } else if (
          response.data &&
          (response.data as any).list &&
          Array.isArray((response.data as any).list)
        ) {
          adminList.value = (response.data as any).list
          console.log('管理员数据设置成功 (list):', adminList.value)
        } else {
          console.error('返回的数据不是数组:', response.data)
          adminList.value = []
          // 当API返回错误或空数据时，使用静态数据
          useStaticData()
        }
      } else {
        console.error('获取管理员失败:', response?.msg || '未知错误')
        // 当API返回错误时，使用静态数据
        useStaticData()
      }
    } catch (error) {
      console.error('获取管理员请求异常:', error)
      // 当请求异常时，使用静态数据
      useStaticData()
    }
  }

  // 使用静态数据作为备用
  const useStaticData = () => {
    console.log('使用管理员静态数据')
    adminList.value = [
      { id: '1', name: '管理员' },
      { id: '2', name: '销售经理' },
      { id: '3', name: '客户经理' },
      { id: '4', name: '项目经理' },
    ]
  }

  // 初始化数据
  onMounted(() => {
    console.log('AdminSelector组件挂载，开始获取数据')
    // 如果父组件没有传入选项数据，则自己获取
    if (!props.options || props.options.length === 0) {
      getAdminList()
    }
  })
</script>
